<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/prop-types.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props, context) {
            super(props, context)
        }

        render() {
            return (
                <div className="app">
                    /*回调函数形式的ref*/
                    <input type="text" placeholder="点击按钮提示数据" ref={c => this.input1 = c} onClick={this.showData}/>
                    <input type="text" placeholder="失去焦点提示数据" ref={c => this.input2 = c} onBlur={this.showData}/>
                    <button ref={c => this.button = c} onClick={this.btnClick}>点击</button>
                </div>
            );
        }

        showData = () => {
            console.log(this.input1.value)
            console.log(this.input2.value)
        }
        btnClick = () => {
            this.button.style.color = "red"
        }
    }

    ReactDOM.render(<App></App>, document.querySelector("#root"))
</script>
</body>
</html>